<template>
    <div class="organize">
        <div class="search-from flex justify-between">
            <el-form :inline="true" :model="searchFrom">
                <el-form-item label="组织编号：">
                    <el-input v-model="searchFrom.orgCode" placeholder="请输入组织编号"></el-input>
                </el-form-item>
                <el-form-item label="组织名称：">
                    <el-input v-model="searchFrom.orgName" placeholder="请输入组织名称"></el-input>
                </el-form-item>
                <el-form-item label="负责人：">
                    <el-input v-model="searchFrom.chargePersonName" placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button v-has="237" type="success" @click="handle('add')">添加</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 表格 -->
        <div class="table-list">
            <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column label="序号" width="80">
                    <template slot-scope="scope">
                        <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="组织编号"
                        prop="orgCode">
                </el-table-column>
                <el-table-column
                        prop="orgName"
                        label="组织名称">
                </el-table-column>
                <el-table-column
                        prop="chargePersonName"
                        label="负责人">
                </el-table-column>
                <el-table-column
                        prop="adminPersonName"
                        label="管理员">
                </el-table-column>
                <el-table-column
                        prop="parentName"
                        label="上级组织">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-has="238" type="text" @click="handle('edit', scope.row)">编辑</el-button>
                        <el-button v-has="239" type="text" @click="handle('del', scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                        @current-change="changePage"
                        :current-page.sync="searchFrom.pageIndex"
                        :page-size="searchFrom.pageSize"
                        layout="prev, pager, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增、编辑、详情组织 -->
        <addOrganize
                v-if="organizeParams.visible"
                :organizeParams="organizeParams"
                :organizeArr="tableData"
                @getList="getList"></addOrganize>
    </div>
</template>

<script>
    import {getOrganizeList, delOrganize} from "@/api/systemManage";
    import addOrganize from './modules/addOrganize'
    import {filterParams} from "@/config/utils";

    export default {
        name: 'organize',
        components: {
            addOrganize
        },
        data () {
            return {
                searchFrom: {
                    orgCode: '',
                    orgName: '',
                    chargePersonName: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                // 表格参数
                total: 0,
                tableData: [],
                // 新增、编辑、查询相关参数
                organizeParams: {
                    visible: false,
                    id: '',
                    title: '',
                    type: ''
                }
            }
        },
        created () {
            this.getList()
        },
        methods: {
            // 列表数据
            getList() {
                let params = filterParams((this.searchFrom))
                getOrganizeList(params).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total || 0;
                }).catch()
            },
            // 查询
            search () {
                this.searchFrom.pageIndex = 1;
                this.getList();
            },
            // 编辑
            handle (type, row) {
                switch (type) {
                    case 'add':
                        this.organizeParams = {
                            visible: true,
                            title: '新增组织',
                            type: type
                        };
                        break;
                    case 'edit':
                        this.organizeParams = {
                            visible: true,
                            title: '编辑组织',
                            type: type,
                            id: row.id
                        };
                        break;
                    case 'del':
                        this.$confirm('您确定要删除该数据吗?', '删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            delOrganize(row.id).then(res => {
                                this.$message.success('操作成功');
                                this.getList();
                            }).catch(()=>{})
                        }).catch();
                        break;
                }
            },
            // 切换页码
            changePage(val) {
                this.searchFrom.pageIndex = val;
                this.getList();
            }
        }
    }
</script>

<style scoped>

</style>